/**
 * @description 面包屑对应的属性组件
 */


import { Tabs } from 'antd';
import { InputNumber } from 'antd';
import React, { useEffect, useMemo, useState } from 'react'
import { setAttrForm } from '@/utils/AttrForm';

import JsonEdit from '@/components/Monaco/JsonEdit';



function ChartAttr({ template2, onConfigEvent, setChartTap, chartTap }) {

  // -----------------------------------
  // tab
  // -----------------------------------
  const items = useMemo(() => {
    const items =
      [
        {
          key: 'line',
          label: '折线',
          children:
            <>
              <NumWrapper defaultValue={template2.base.lineNum} keys={['base', 'lineNum']} onConfigEvent={onConfigEvent} />
              <JsonEdit value={template2.line} onValueChange={(newValue) => onConfigEvent(['line'], newValue)} />,
            </>
        },
        {
          key: 'bar',
          label: '柱状',
          children:
            <>
              <NumWrapper defaultValue={template2.base.barNum} keys={['base', 'barNum']} onConfigEvent={onConfigEvent} />
              <JsonEdit value={template2.bar} onValueChange={(newValue) => onConfigEvent(['bar'], newValue)} />,
            </>
        },
        {
          key: 'pie',
          label: '饼图',
          children:
            <>
              <NumWrapper defaultValue={template2.base.pieNum} keys={['base', 'pieNum']} onConfigEvent={onConfigEvent} />
              <JsonEdit value={template2.pie} onValueChange={(newValue) => onConfigEvent(['pie'], newValue)} />,
            </>
        },
        {
          key: 'funnel',
          label: '漏斗',
          children:
            <>
              <NumWrapper defaultValue={template2.base.funnelNum} keys={['base', 'funnelNum']} onConfigEvent={onConfigEvent} />
              <JsonEdit value={template2.funnel} onValueChange={(newValue) => onConfigEvent(['funnel'], newValue)} />,
            </>
        },
        {
          key: 'gauge',
          label: '仪表盘',
          children:
            <>
              <NumWrapper defaultValue={template2.base.gaugeNum} keys={['base', 'gaugeNum']} onConfigEvent={onConfigEvent} />
              <JsonEdit value={template2.gauge} onValueChange={(newValue) => onConfigEvent(['gauge'], newValue)} />,
            </>
        },
        {
          key: 'wordCloud',
          label: '词云',
          children:
            <JsonEdit value={template2.wordCloud.option} onValueChange={(newValue) => onConfigEvent(['wordCloud', 'option'], newValue)} />,

        },
      ]
    return items

  }, [])



  useEffect(() => {
    setAttrForm(null)
  }, [])

  return (
    <>
      <Tabs defaultActiveKey={chartTap} items={items} onChange={(newChartTap) => setChartTap(newChartTap)} />

    </>
  )
}


function NumWrapper({ defaultValue, keys, onConfigEvent }) {
  return (
    <div className='base-num-wrapper'>
      <span className='label'>展示数量</span>
      <InputNumber min={1} precision={0} defaultValue={defaultValue} onChange={(newValue) => onConfigEvent(keys, newValue)} />
    </div>
  )
}
export default React.memo(ChartAttr) 